
<style lang="less" scoped>
// 占位div样式
.left-div {
  visibility: hidden;
  border-style: solid;
  border-color: black;
  /* border-right-color: red; */
  border-color: transparent;
}
.update-password {
  margin-top: 10px;
}
// 一级标题
.first-title {
  font-size: 16px;
  font-family: "PingFang SC";
  font-weight: bold;
  color: #464c5b;
}
body {
  overflow: scroll;
}
</style>

<template>
  <div style="padding-top: 0px;">
    <Card>
      <Row style="margin-top: 20px;overflow: -webkit-paged-y;">
        <Col span="2" class="left-div"></Col>
        <Col span="20">
          <div>
            <!-- 个人信息 -->
            <div class="update-user-info">
              <div style="overflow:auto">
                <span class="first-title" style="float:left">个人信息</span>
                <div style="float:right">
                  <Button
                    type="primary"
                    style="float:right"
                    @click="updataPasswordBtn"
                  >{{passwordBtnName}}</Button>
                  <!--修改密码--->
                  <Button
                    v-show="passwordShow !== true"
                    type="info"
                    style="margin-right:5px"
                    :disabled="!readonly"
                    @click="updataUserInfoBtn"
                  >修改信息</Button>
                </div>
              </div>
              <Divider orientation="left"></Divider>
              <div v-show="infoShow">
                <Form id="form" ref="UserAddForm" v-model="userEntiy" :label-width="100">
                  <!-- <Row> -->
                  <Row>
                    <Col span="18">
                      <FormItem label="工号:">
                        <Input v-model="userEntiy.no" :readonly="everyReadonly"></Input>
                      </FormItem>
                      <FormItem label="角色:">
                        <Input v-model="userEntiy.roleName" :readonly="everyReadonly"></Input>
                      </FormItem>
                      <FormItem v-if="userEntiy.roleKey === student" label="专业:">
                        <Input v-model="userEntiy.professionName" :readonly="everyReadonly"></Input>
                      </FormItem>
                      <FormItem label="姓名:">
                        <Input v-model="userEntiy.name" :readonly="readonly" placeholder="请输入姓名"></Input>
                      </FormItem>
                      <FormItem label="生日:">
                        <DatePicker
                          type="date"
                          style="width:100%"
                          placeholder="请选择生日"
                          v-model="userEntiy.birthday"
                          :disabled="readonly"
                          :clearable="false"
                        ></DatePicker>
                      </FormItem>
                      <FormItem label="手机:">
                        <Input v-model="userEntiy.phone" :readonly="readonly" placeholder="请输入手机号"></Input>
                      </FormItem>
                      <FormItem label="性别:">
                        <RadioGroup v-model="userEntiy.sex">
                          <Radio :disabled="readonly" :label="0">男</Radio>
                          <Radio :disabled="readonly" :label="1">女</Radio>
                        </RadioGroup>
                      </FormItem>
                      <FormItem label="邮箱:">
                        <Input v-model="userEntiy.email" :readonly="readonly" placeholder="请输入邮箱"></Input>
                      </FormItem>
                    </Col>
                    <Col span="6">
                      <Button
                        v-show="!readonly"
                        type="info"
                        style="margin-top: 343px;margin-left: 10px;"
                        ghost
                        @click="handleUpdateUserInfo"
                      >保存</Button>
                    </Col>
                  </Row>
                </Form>
              </div>
            </div>
            <!-- 修改密码 -->
            <div class="update-password" v-show="passwordShow">
              <div style="overflow:auto">
                <span class="first-title">修改密码</span>
              </div>
              <Divider orientation="left"></Divider>
              <Row>
                <Col span="18">
                  <update-password
                    ref="UpdatePasswordRef"
                    :row="passwordEntity"
                    :isAdmin="false"
                    @validate-success="handleUpdatePassword"
                  ></update-password>
                </Col>
                <Col span="6">
                  <Button
                    type="info"
                    style="margin-top: 115px;margin-left: 10px;"
                    ghost
                    @click="savePassword"
                  >保存</Button>
                </Col>
              </Row>
            </div>
          </div>
        </Col>
        <Col span="2"></Col>
      </Row>
    </Card>
  </div>
</template>
<script>
import httpUtil from '@/libs/httpUtil'
import UserAdd from '@/view/ora-admin/user-manage/UserAdd.vue'
import UpdatePassword from '@/view/ora-admin/user-manage/UpdatePassword.vue'

import { mapActions } from 'vuex'

export default {
  name: 'UserInfo',
  components: {
    UserAdd,
    UpdatePassword
  },
  data () {
    return {
      // 个人信息
      readonly: true,
      everyReadonly: true,

      infoShow: true,
      userEntiy: {}, // 用户的信息
      passwordShow: false,
      passwordBtnName: '修改密码',
      passwordEntity: {}
    }
  },
  methods: {
    ...mapActions([
      'getUserInfo' // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
    ]),
    // 提交回答信息
    handleSubmit (name) {
      // 回答信息封装
      this.answerForm.requestId = this.requestId
      this.answerForm.pid = -1
      this.answerForm.type = 1
      this.$httpUtil.asyncPost(
        'request_answer/answer/save',
        this.answerForm,
        res => {
          this.$Message.success(res.data.msg)
        }
      )
    },
    handleReset (name) {
      this.$refs[name].resetFields()
      this.answerForm = {}
      this.contentIsReset = true
      this.selectProCourseList = this.courseList
      setTimeout(() => {
        // 解决第二次重置，富文本框中内容不消失
        this.contentIsReset = false
      }, 500)
    },

    //= =============== 修改个人信息相关  start==============
    updataUserInfoBtn () {
      this.readonly = false
    },
    // 保存修改的结果
    handleUpdateUserInfo () {
      const userInfo = {
        birthday: this.userEntiy.birthday,
        email: this.userEntiy.email,
        name: this.userEntiy.name,
        phone: this.userEntiy.phone,
        sex: this.userEntiy.sex,
        roleId: this.userEntiy.roleId
      }

      this.$httpUtil.asyncPost('web/user/save', userInfo, res => {
        let data = res.data
        if (data.code === 200) {
          this.$Message.success(data.msg)
          this.getUserInfo1()
          this.getUserInfo()
          this.readonly = true
        } else {
          this.$Message.error(data.msg)
        }
      })
    },

    //= =============== 修改个人信息相关  end==============
    //= =============== 修改个人密码 start ==================
    updataPasswordBtn () {
      if (this.infoShow === true) {
        // 修改密码
        // 为true 显示呢
        this.passwordShow = true
        this.infoShow = false
        this.passwordBtnName = '取消'
        // this.passwordEntity = {
        //   userId: this.userEntiy.tid,
        //   no: this.userEntiy.no,
        //   name: this.userEntiy.name
        // };
      } else {
        this.notUpdatePassword()
      }
    },

    // 不修改密码
    notUpdatePassword () {
      // 不修改密码
      this.infoShow = true
      this.passwordBtnName = '修改密码'
      this.passwordShow = false
      this.readonly = true
    },

    savePassword () {
      this.$refs.UpdatePasswordRef.handleOk()
    },

    // 修改个人密码
    handleUpdatePassword (passwordFormData) {
      debugger
      this.$httpUtil.asyncPost(
        'web/user/updatePassword',
        passwordFormData,
        res => {
          let data = res.data
          if (data.code === 200) {
            this.userEntiy = data.records
            this.$Message.success(data.msg)
            this.notUpdatePassword()
          } else {
            this.$Message.error(data.msg)
          }
        }
      )
    },

    //= =============== 修改个人密码 end ==================

    // 获取当前用户的信息
    getUserInfo1 () {
      this.$httpUtil.asyncPost('web/user/getUserInfo', {}, res => {
        let data = res.data
        if (data.code === 200) {
          this.userEntiy = data.records
        } else {
          this.$Message.error(data.msg)
        }
      })
    },

    // 界面初始化方法
    init () {
      this.getUserInfo1()
    }
  },
  computed: {},
  mounted: function () {
    this.init()
  }
}
</script>
